<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>实验2_11</title>
		<style>
			* {
				box-sizing: border-box;
				font-family: "Microsoft YaHei";
			}

			body {
				margin-left: 500px;
				margin-top: 250px;
				background: gainsboro;
			}

			.login-card {
				width: 400px;
				padding: 40px;
				background: white;
				text-align: center;
			}

			.title {
				font-size: 28px;
				color: black;
				margin-bottom: 30px;
			}

			.input {
				width: 100%;
				height: 44px;
				border: 2px solid gainsboro;
				border-radius: 6px;
				padding-left: 10px;
				font-size: 16px;
				margin-bottom: 16px;
				outline: none;
			}

			.input:focus {
				border-color: orange;
			}

			.actions {
				display: flex;
				align-items: center;
				justify-content: space-between;
				column-gap: 16px;
				margin-top: 8px;
			}

			.button {
				width: 180px;
				height: 44px;
				border: none;
				border-radius: 6px;
				background: orange;
				color: black;
				font-size: 16px;
				cursor: pointer;
			}

			.links {
				align-items: center;
				font-size: 14px;
				white-space: nowrap;
			}

			.links a {
				color: steelblue;
				text-decoration: none;
			}

			.links a:hover {
				text-decoration: underline;
			}
		</style>
	</head>
	<body>
		<div class="login-card">
			<div class="title">登 录</div>
			<input type="text" placeholder="用户名" class="input">
			<input type="password" placeholder="密码" class="input">
			<div class="actions">
				<button class="button">登录</button>
				<div class="links">
					<a href=" ">注册新用户</a>
					<a href=" ">忘记密码?</a>
				</div>
			</div>
		</div>
	</body>
</html>